<template>
	<uni-popup ref="popup" type="center" :mask-click="false">
		<view class="add_main">
			<view class="tip-title">
				什么情况不保修？
			</view>
			<view class="tip-text-items">下列情况不实行三包，但是可以实行收费修理：<br>
				① 产品不在包修期内出现问题的;<br>
				② 消费者因使用、维护、保管不当造成损坏的;<br>
				③ 非品牌方指定维修人员拆卸或维修造成损坏的;<br>
				④ 无有效三包凭证及有效发票的;<br>
				⑤ 三包凭证型号与修理产品型号不符或者涂改的;<br>
				⑥ 因不可抗拒力造成损坏的。</view>
			<button class="onlogout" @click="closePopup()"><span>知道了</span></button>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import {
		ref, toRefs, watch, onMounted, nextTick
	} from "vue";
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
	})
	// const scrollRef=ref()
	//使用父组件传递过来的值
	const { showpopup } = toRefs(props)
	const popup = ref()
	const emit = defineEmits(['set-popup'])
	const closePopup = () => {
		popup.value.close()
		emit('set-popup', false)
	}
	const openPopup = () => {
		popup.value.open()
		emit('set-popup', true)
	}
	watch(showpopup, (n) => {
		if (n) {
			openPopup()
		} else {
			closePopup()
		}
	})
</script>

<style lang="scss" scoped>
	.add_main{
		padding: 24rpx;
		background-color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		row-gap: 12rpx;
		border-radius: 20rpx;
		.tip-title{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}
		.tip-text-items{
			display: flex;
			justify-content: center;
			flex-direction: column;
			row-gap: 24rpx;
			padding: 24rpx ;
			
		}
		.onlogout {
			font-size: 28rpx;
			height: 80rpx;
			border-radius: 50rpx;
			line-height: 80rpx;
			width: 100%;
			color: #fff;
			background-color: #007cff;
		}
	}
</style>